<template>
  <div>
    <Table ref="baseTable" :tableData="tableData" :columns="columns" :sortChange="sortChange">
      <template #ageSlot="{row}">
        <AgeSlot :row="row"></AgeSlot>
      </template>
    </Table>
  </div>
</template>
<script>
import Table from '@/components/Table/index.vue'
import AgeSlot from './AgeSlot.vue'
// import {columns} from './columns'
export default {
  name: 'HomeTable',
  components: {
    Table,
    AgeSlot,
  },
  data() {
    return {
      // columns: columns(this),
      columns: [
        {type: 'seq'},
        {field: 'name', title: '姓名'},
        {field: 'dollar', title: '美金', type: 'withColorRatio', suffix: '$', bigNumber: 10},
        {field: 'salary', title: '收入', type: 'withColorRatio', suffix: '%'},
        {title: '我的插槽', type: 'slot', slotName: 'ageSlot'},

        // {field: 'role', title: '角色'},
        // {field: 'sex', title: '性别'},
        // {field: 'age', title: '年龄', sortable: true},
        // {field: 'address', title: '地址', width: '20%', align: 'right'},
      ],
      tableData: [
        {
          id: 10001,
          dollar: 1.3,
          salary: -0.031,
          name: 'Test1',
          role: 'Develop',
          sex: 'Man',
          age: 28,
          address: 'test abc',
        },
        {
          id: 10002,
          dollar: 1.3,
          salary: null,
          name: 'Test2',
          role: 'Test',
          sex: 'Women',
          age: 22,
          address: 'Guangzhou',
        },
        {id: 10003, dollar: '3.2', salary: 0.036, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai'},
        {
          id: 10004,
          dollar: null,
          salary: -0.0278,
          name: 'Test4',
          role: 'Designer',
          sex: 'Women',
          age: 24,
          address: 'Shanghai',
        },
      ],
    }
  },
  methods: {
    sortChange() {},
  },
}
</script>
<style lang="less" scoped></style>
